<template>
  <div class="geo-option">
      <el-collapse-item name="1" title="geo地图">
        <el-form-item label="显示">
          <el-switch v-model="geo.show"/>
        </el-form-item>
        <el-form-item label="漫游">
          <tm-select v-model="geo.roam" :data="roamList"/>
        </el-form-item>
        <el-form-item label="中心坐标">
         <div class="flex2">
           <el-input v-model="geo.center[0]" />
           <el-input v-model="geo.center[1]" />
         </div>
        </el-form-item>
        <el-form-item label="长宽比">
          <el-input-number v-model="geo.aspectScale" :step="0.05"/>
        </el-form-item>
        <el-form-item label="zoom">
          <el-input-number v-model="geo.zoom" :step="0.05"/>
        </el-form-item>

        <el-form-item label="省份">
          <tm-select v-model="geo.province" :data="provinces" @change="onProvinceChange" value-key="code" label-key="name"/>
        </el-form-item>
        <el-form-item label="城市">
          <tm-select v-model="geo.city" :data="cities" value-key="code" label-key="name"/>
        </el-form-item>
      </el-collapse-item>
      <el-collapse-item title="标签">
        <geo-label-option title="标签" :data="geo.label"/>
        <geo-label-option title="标签-高亮" :data="geo.emphasis.label"/>
      </el-collapse-item>
      <el-collapse-item title="区域">
        <geo-item-option title="区域" :data="geo.itemStyle"/>
        <geo-item-option title="区域-高亮" :data="geo.emphasis.itemStyle"/>
      </el-collapse-item>
  </div>
</template>

<script>
import TmSelect from "@/package/components/tm-select";
import geoLabelOption from './geo-label-option'
import geoItemOption from './geo-item-option'

import {geoList} from './geoList'

export default {
  name: 'geo-option',
  cnName: 'geo-option',
  components: {
    TmSelect,
    geoLabelOption,
    geoItemOption
  },
  props: {
    geo: Object
  },
  data() {
    return {
      provinces: geoList,
      roamList: [
        {label: '缩放', value: 'scale'},
        {label: '平移', value: 'move'},
        {label: '都开启', value: true},
        {label: '都关闭', value: false}
      ],
      cities: []
    }
  },
  methods: {
    onProvinceChange(val) {
      console.info(val)
      this.geo.city = ''
      if(!val) {
        this.cities = []
        return
      }
      const find = geoList.find(o => o.code === val)
      this.cities = find.cities
    }
  }
}
</script>

<style lang="less" scoped>
.geo-option {
}
</style>
